<template>
  <span>
  <el-row type="flex" align="middle">
    <div class="dot" :class="'dot-'+type"/>
    <span v-if="label" class="dot-label">{{ label }}</span>
  </el-row>
  </span>
</template>

<script>
export default {
  name: "StatusDot",
  props: {
    label: String,
    type: {
      type: String,
      validator(val) {
        return ["primary", "success", "warning", "danger", "info"].includes(val)
      }
    }
  }
}
</script>

<style scoped>
.dot {
  width: 8px;
  height: 8px;
  background-color: #409EFF;
  border-radius: 50%;
}

.dot-primary {
  background-color: #409EFF;
}

.dot-success {
  background-color: #70dc3b;
}

.dot-danger {
  background-color: #F56C6C;
}

.dot-warning {
  background-color: #f8be52;
}

.dot-info {
  background-color: #c1c1c1;
}

.dot-label {
  margin-left: 8px;
  font-size: 14px;
}
</style>
